<template>
  <div :class="[item.isShowWhitelace == 1 ? 'c-pl24 c-pv30' : '', !isSetPageBackground ? 'c-bg-white' : '']" class="c-flex-column">
    <div class="c-flex-column">
      <div class="c-w100 c-contexty-hidden c-contextX-scroll c-ws-n c-fs0">
        <div class="c-inlineblack" :class="item.isShowWhitelace == 1 ? 'c-mr16 c-ww210' : 'c-ww220'" v-for="(_item, index) in item.items" :key="index">
          <img :style="getBorderRadius(borderRadius, '0.4rem')" :class="item.isShowWhitelace == 1 ? 'c-ww210' : 'c-ww220'" :src="$addXossFilter(_item.image, require('@/assets/defult270.png'))" @click="clickItem(_item)" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { custIndex } from "@/mixin/custIndex.js";
import { customStyle } from '@/utils/customStyle.js'
export default {
  mixins: [custIndex, customStyle],
  components: {
  },
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      },
    },
    upgradeMemberJump: {
      type: String,
      default: ''
    },
    pageName: {//首页 INDEX 预览页 PREVIEW_INDEX 微页面 MICRO_PAGE
      type: String,
      default: "INDEX"
    },
  },
  data() {
    return {
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      navMap: global.navMap,
      isSetPageBackground: sessionStorage.getItem("isSetPageBackground") || 0,
    };
  },
  computed: {
    borderRadius() {
      return this.item.styleParam && this.item.styleParam.borderRadius ? this.item.styleParam.borderRadius : null
    },
  },
  methods: {
    // 点击导航
    clickItem(data) {
      data.pageName = this.pageName;
      data.upgradeMemberJump = this.upgradeMemberJump;
      this.commonModuleRouterPush(data)
    },
  },
};
</script>

<style scoped>
.search-bg {
  border-radius: 0.2rem;
  background: #f4f7f9;
}
.fixedTop {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  margin: 0 auto;
  max-width: 16rem;
}
</style>
